<!DOCTYPE html>
<html>
<head>
    <title>TradingView Charting Library demo -- Mobile (black)</title>
    <!-- Fix for iOS Safari zooming bug -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <script type="text/javascript" src="charting_library/charting_library.min.js"></script>
    <!--<script type="text/javascript" src="datafeeds/udf/dist/polyfills.js"></script>
    <script type="text/javascript" src="datafeeds/udf/dist/bundle.js"></script>-->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/socket.io.js"></script>
    <script src="js/webcomm.js"></script>
    <script src="js/base64-binary.js"></script>
    <script src="js/pako.min.js"></script>
    <script type="text/javascript" src="js/websocket.js"></script>
    <script type="text/javascript" src="datafeeds/jsapi/datefee.js"></script>
</head>

<body style="margin:0px;background-color: #1E212B!important;">
<div id="tv_chart_container" style="background-color: #1E212B;!important;"></div>
</body>
<script type="text/javascript">
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    function getIntervalHour(startDate, endDate) {
      var ms = endDate - startDate;
      return Number(ms/1000/60/60);
    }
    function setData (name, obj) {
      if (typeof obj === "object") {
        obj = JSON.stringify(obj);  //将obj转为String类型

        //var obj = "{userName:userName,password:password}"
      }
      localStorage.setItem(name, obj);  //localStorage存储
    }
    function getData (key) {
      var data;
      try {
        var obj = localStorage.getItem(key);
        data = JSON.parse(obj);  //将obj转为JSON  localStorage只能存取字符串。所以取出的必须转换成对象
      } catch (e) {
        data = obj;
      }
      return data;
    }

    var symbolTime;
    if(getData("klineSelectTime")){
      symbolTime  = getData("klineSelectTime");
    }else{
      symbolTime = "15";
    }

    var klineType=getCookieValue("trading"+Datafeeds.symbolInfo.ticker);
    if(symbolTime == "-1"){
          klineType = "1";
    }else{
      klineType=symbolTime;
    }
    var releaseTime = getParameterByName("releaseTime");

    if(releaseTime){
      var currentDate = new Date();
      var hour = getIntervalHour(releaseTime,currentDate.getTime());
      if(!isNaN(hour) && hour > 0){
        if(hour > 144){
          symbolTime = "240";
          klineType=symbolTime;
        }else if(hour > 48){
          symbolTime = "60";
          klineType=symbolTime;
        }else if(hour > 24){
          symbolTime = "30";
          klineType=symbolTime;
        }else if(hour > 8){
          symbolTime = "15";
          klineType=symbolTime;
        }else if(hour > 1){
          symbolTime = "5";
          klineType=symbolTime;
        }else if(hour > -1){
          symbolTime = "1";
          klineType=symbolTime;
        }
      }
    }
    // console.log(klineType)
    // if(isEmpty(klineType)){
    //   if(symbolTime == "-1"){
    //     klineType = "1";
    //   }else{
    //     klineType=symbolTime;
    //   }
    // }else{
    //   if(symbolTime == "-1"){
    //     klineType = "1";
    //   }else{
    //     klineType=symbolTime;
    //   }
    // }
    var colorUp = "#ED5E57";
    var colorDown = "#0BAC6A";

    var dex = window.location.href.indexOf("language=");
    var lan = window.location.href.substring(dex).replace("language=","");
    // console.log(lan);
    var lanMin = "分时";
    var lanMin1 = "1分钟";
    var lanMin5 = "5分钟";
    var lanMin15 = "15分钟";
    var lanMin30 = "30分钟";
    var lanMin60 = "60分钟";
    var lanMin240 = "4小时";
    var lanDay1 = "日线";
    var lanWeex1 = "周线";
    if(lan == "th"){
      // lan = "th_TH";
      lan = "en";

      colorUp = "#0BAC6A";
      colorDown = "#ED5E57";

      lanMin = "การจัดสรรเวลา";
      lanMin1 = "1 นาที";
      lanMin5 = "5 นาที";
      lanMin15 = "15 นาที";
      lanMin30 = "30 นาที";
      lanMin60 = "60 นาที";
      lanMin240 = "4 H";
      lanDay1 = "สายวัน";
      lanWeex1 = "สายสัปดาห์";
    }else if(lan === "zh_CN"){
      lan = "zh";

      colorUp = "#ED5E57";
      colorDown = "#0BAC6A";


      lanMin = "分时";
      lanMin1 = "1分钟";
      lanMin5 = "5分钟";
      lanMin15 = "15分钟";
      lanMin30 = "30分钟";
      lanMin60 = "60分钟";
      lanMin240 = "4小时";
      lanDay1 = "日线";
      lanWeex1 = "周线";
    }else if(lan === "ja"){

      lanMin = "期間";

      colorUp = "#0BAC6A";
      colorDown = "#ED5E57";

      lanMin1 = "1分間";
      lanMin5 = "5分間";
      lanMin15 = "15分間";
      lanMin30 = "30分間";
      lanMin60 = "60分間";
      lanMin240 = "4 H";
      lanDay1 = "1日";
      lanWeex1 = "1週";
    }else if(lan === "vi"){

      colorUp = "#0BAC6A";
      colorDown = "#ED5E57";

      lanMin = "Line";
      lanMin1 = "1m";
      lanMin5 = "5m";
      lanMin15 = "15m";
      lanMin30 = "30m";
      lanMin60 = "60m";
      lanMin240 = "4h";
      lanDay1 = "1d";
      lanWeex1 = "1w";
    }else if(lan === "en"){

      colorUp = "#0BAC6A";
      colorDown = "#ED5E57";

      lanMin = "Line";
      lanMin1 = "1m";
      lanMin5 = "5m";
      lanMin15 = "15m";
      lanMin30 = "30m";
      lanMin60 = "60m";
      lanMin240 = "4h";
      lanDay1 = "1d";
      lanWeex1 = "1w";
    }
    //从api.js传入 kline.js 中的url带过来的配置地址
   /* var apiUrl = getParameterByName("apiUrl");
    if(isEmpty(apiUrl)){
        apiUrl="https://www.apijex.com/";
    }*/
   var apiUrl;
   if(location.host.toLowerCase().indexOf("localhost") !== -1){
     apiUrl = "http://api.coinfex.com/"
     // apiUrl= "http://192.168.0.129:8888/"
   }else{
     apiUrl= location.origin.toLowerCase()+"/";
   }
     if(location.host.toLowerCase().indexOf("localhost") !== -1 ||location.host.toLowerCase().indexOf("test.coinfex") !== -1 ){
       Datafeeds.url.websocket="ws://testws.coinfex.com/socket.io/?transport=websocket";
     }else{
       Datafeeds.url.websocket="wss://ws.coinmo.com/socket.io/?transport=websocket";
     }
    Datafeeds.url.request = apiUrl+"api/v2/pub/kline";

    // Datafeeds.url.systemTime="http://api.coinfex.com/api/v1/market/klineTime";
    Datafeeds.url.systemTime=apiUrl+"api/v2/pub/systemTime";
    TradingView.onready(function()
    {
        var widget = new TradingView.widget({
            //debug: true,
            autosize:true,
            fullscreen: true,
            symbol: Datafeeds.symbolInfo.name,
            interval: klineType,
            timezone: Datafeeds.symbolInfo.timezone,
            container_id: 'tv_chart_container',
            datafeed: Datafeeds,
            library_path: "charting_library/",
            locale:  lan || getParameterByName('lang') ,
            drawings_access: {
              type: 'black',
              tools: [{
                name: 'Regression Trend',
              }],
            },
            disabled_features: [
              //"compare_symbol",
              "display_market_status",//显示市场状态（开盘 收盘 等）
              "go_to_date",
              "header_chart_type",//显示图表类型按钮
              "header_compare",
              "header_interval_dialog_button",
              "header_resolutions",//周期设置按钮
              "header_screenshot",//截屏按钮
              "header_symbol_search",//品种搜索框
              "header_undo_redo",//撤销、重做按钮
              "header_saveload",//保存图表，加载图表按钮
              "legend_context_menu",
              "show_hide_button_in_legend",
              "show_interval_dialog_on_key_press",
              "snapshot_trading_drawings",
              "symbol_info",//商品信息对话框
              "timeframes_toolbar",
              "pane_context_menu",
              "control_bar",//前进 后退 放大 缩小
              "countdown",//在价格标签上显示倒计时
              //"edit_buttons_in_legend", //在元素信息中显示“设置”按钮
              "source_selection_markers",
              "use_localstorage_for_settings",//允许将用户设置保存到localstorage
              "volume_force_overlay", //在与主数据列相同的窗格中放置成交量指示器
              //"high_density_bars", //允许缩小在1个屏幕上显示超过60000条个K线
              //"save_chart_properties_to_local_storage"
            ],
            enabled_features:[
              //"hide_last_na_study_output",
              //"move_logo_to_main_pane",//将标志放在主数据列窗格上，而不是底部窗格
              //"same_data_requery",
              "side_toolbar_in_fullscreen_mode",//使用此功能，您可以在全屏模式下启用绘图工具栏
              "hide_left_toolbar_by_default",//当用户第一次打开时隐藏左侧工具栏
              "keep_left_toolbar_visible_on_small_screens",//防止左侧工具栏在小屏幕上消失
              "dont_show_boolean_study_arguments",//是否隐藏指标参数
              //"keep_left_toolbar_visible_on_small_screens",//防止左侧工具栏在小屏幕上消失
              //"disable_resolution_rebuild"
            ],
            // preset: "mobile",
            toolbar_bg: "#1E212B",//工具栏背景颜色
            loading_screen: {
              backgroundColor: "#1E212B",//加载时的背景颜色
              foregroundColor: "#346ab3",//加载时图标颜色
            },
            charts_storage_url: 'http://saveload.tradingview.com',
            charts_storage_api_version: '1.1',
            client_id: 'tradingview.com',
            user_id: 'public_user_id',
            /*time_frames: [
              { text: "1min", resolution: "5s", description: "1 min" },
              { text: "1h", resolution: "1", description: "1 hour" },
              { text: "1d", resolution: "5", description: "1 Days" },
            ],*/
            overrides: {
              //蜡烛样式
              "mainSeriesProperties.candleStyle.upColor": "#D15E57",//绿
              "mainSeriesProperties.candleStyle.downColor": "#0BAC6A",//红
              //烛心
              "mainSeriesProperties.candleStyle.drawWick": true,
              //烛心颜色
              "mainSeriesProperties.candleStyle.wickUpColor": '#D15E57',
              "mainSeriesProperties.candleStyle.wickDownColor": '#0BAC6A',
              //边框
              "mainSeriesProperties.candleStyle.drawBorder": true,
              "mainSeriesProperties.candleStyle.borderUpColor": "#D15E57",
              "mainSeriesProperties.candleStyle.borderDownColor": "#0BAC6A",

              "symbolWatermarkProperties.color":"rgba(0, 0, 0, 0)",//水印100％不透明（不可见）
              "paneProperties.background": "#1E212B",//整体背景颜色
              "symbolWatermarkProperties.transparency": 100,
              //网格线
              "paneProperties.topMargin": 15,
              "paneProperties.bottomMargin": 0,
              "paneProperties.vertGridProperties.color": "#242833",
              "paneProperties.vertGridProperties.style": 0,
              "paneProperties.horzGridProperties.color": "#242833",
              "paneProperties.horzGridProperties.style": 0,
              // "paneProperties.crossHairProperties.color": "#ffffff",
              //坐标轴和刻度标签颜色
              "scalesProperties.textColor" : "#666870",
              "scalesProperties.lineColor": "#32343E",
              //成交量高度
              "volumePaneSize": "medium",//支持的值: large, medium, small, tiny

              // "MACDPaneSize":"tiny"
            },
            studies_overrides: {
              "volume.volume.color.0": "#0BAC6A",
              "volume.volume.color.1": "#D15E57",
              "volume.volume.transparency": 100,
            },
        });
        Datafeeds.widget=widget;

        widget.onChartReady(function() {

          if(symbolTime == "-1"){
            widget.createButton().addClass("mydate mydate-active")
              .attr('title', lanMin)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","-1");
                widget.chart().setResolution("1",function () {
                });
              }).append('<span>'+lanMin+'</span>');
          }else{
            widget.createButton().addClass("mydate")
              .attr('title', lanMin)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","-1")
                widget.chart().setResolution("1",function () {
                });
              }).append('<span>'+lanMin+'</span>');
          }

          if(symbolTime == "1"){
            widget.createButton().addClass("mydate mydate-active")
              .attr('title', lanMin1)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","1");
                widget.chart().setResolution("1",function () {
                });
              })
              .append('<span>'+lanMin1+'</span>');
          }else{
            widget.createButton().addClass("mydate")
              .attr('title', lanMin1)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","1");
                widget.chart().setResolution("1",function () {
                });
              })
              .append('<span>'+lanMin1+'</span>');
          }



          if(symbolTime == "5"){
            widget.createButton().addClass("mydate mydate-active")
              .attr('title', lanMin5)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","5");
                widget.chart().setResolution("5",function () {
                });
              })
              .append('<span>'+lanMin5+'</span>');
          }else{
            widget.createButton().addClass("mydate")
              .attr('title', lanMin5)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","5");
                widget.chart().setResolution("5",function () {
                });
              })
              .append('<span>'+lanMin5+'</span>');
          }

          if(symbolTime == "15"){
            widget.createButton().addClass("mydate mydate-active")
              .attr('title', lanMin15)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","15");
                widget.chart().setResolution("15",function () {
                });
              })
              .append('<span>'+lanMin15+'</span>');
          }else{
            widget.createButton().addClass("mydate")
              .attr('title', lanMin15)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","15");
                widget.chart().setResolution("15",function () {
                });
              })
              .append('<span>'+lanMin15+'</span>');
          }

          if(symbolTime == "30"){
            widget.createButton().addClass("mydate mydate-active")
              .attr('title', lanMin30)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","30");
                widget.chart().setResolution("30",function () {
                });
              })
              .append('<span>'+lanMin30+'</span>');
          }else{
            widget.createButton().addClass("mydate")
              .attr('title', lanMin30)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","30");
                widget.chart().setResolution("30",function () {
                });
              })
              .append('<span>'+lanMin30+'</span>');
          }

          if(symbolTime == "60"){
            widget.createButton().addClass("mydate mydate-active")
              .attr('title',lanMin60)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","60");
                widget.chart().setResolution("60",function () {
                });
              })
              .append('<span>'+lanMin60+'</span>');
          }else{
            widget.createButton().addClass("mydate")
              .attr('title',lanMin60)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","60");
                widget.chart().setResolution("60",function () {
                });
              })
              .append('<span>'+lanMin60+'</span>');
          }

          if(symbolTime == "240"){
            widget.createButton().addClass("mydate mydate-active")
              .attr('title',lanMin240)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","240");
                widget.chart().setResolution("240",function () {
                });
              })
              .append('<span>'+lanMin240+'</span>');
          }else{
            widget.createButton().addClass("mydate")
              .attr('title',lanMin240)
              .on('click', function (e) {
                $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                $(this).addClass("mydate-active");
                setData("klineSelectTime","240");
                widget.chart().setResolution("240",function () {
                });
              })
              .append('<span>'+lanMin240+'</span>');
          }


            if(symbolTime == "D"){
              widget.createButton().addClass("mydate mydate-active")
                .attr('title', lanDay1)
                .on('click', function (e) {
                  $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                  $(this).addClass("mydate-active");
                  setData("klineSelectTime","D");
                  widget.chart().setResolution("D",function () {
                  });
                })
                .append('<span>'+lanDay1+'</span>');
            }else{
              widget.createButton().addClass("mydate")
                .attr('title', lanDay1)
                .on('click', function (e) {
                  $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                  $(this).addClass("mydate-active");
                  setData("klineSelectTime","D");
                  widget.chart().setResolution("D",function () {
                  });
                })
                .append('<span>'+lanDay1+'</span>');
            }


            if(symbolTime == "W"){
              widget.createButton().addClass("mydate mydate-active")
                .attr('title', lanWeex1)
                .on('click', function (e) {
                  $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                  $(this).addClass("mydate-active");
                  setData("klineSelectTime","W");
                  widget.chart().setResolution("W",function () {

                  });
                })
                .append('<span>'+lanWeex1+'</span>');
            }else{
              widget.createButton().addClass("mydate")
                .attr('title', lanWeex1)
                .on('click', function (e) {
                  $(this).parents(".left").children().find(".mydate").removeClass("mydate-active");
                  $(this).addClass("mydate-active");
                  setData("klineSelectTime","W");
                  widget.chart().setResolution("W",function () {

                  });
                })
                .append('<span>'+lanWeex1+'</span>');
            }



            // //添加MACD线
            // widget.chart().createStudy("MACD", false, false, [
            //         10 + parseInt(Math.random() * 10)
            //     ], function (guid) {
            //         console.log(guid);
            //
            //     }
            // );


//								添加黄线
//                 widget.chart().createStudy("Moving Average", false, false, [
//                     10
//                 ], function (guid) {
//                     console.log(guid);
//                 }, {
//                     "plot.color.0": "#FFF000",
//                     'Plot.linewidth': 2
//
//                 });

//		                        添加白线
//                 widget.chart().createStudy("Moving Average", false, false, [
//                     5
//                 ], function (guid) {
//                     console.log(guid);
//                 }, {
//                     "plot.color.0": "#ffffff",
//                     'Plot.linewidth': 2
//
//                 });

//						widget.createButton({align: "right"})
//							.attr('title', "Add item")
//							.on('click', function (e) {
//								widget.chart().createStudy("Volume", false, false, [
//										10 + parseInt(Math.random() * 10)
//									], function (guid) {
//										console.log(guid);
//									}
//								);
//							 })
//							.append('<span>+Volume</span>');
//             if(!isEmpty(Datafeeds.systemTime)){
//                 var from1=Datafeeds.systemTime-Datafeeds.intervalToTime(klineType);
//                 widget.chart().setVisibleRange({from:from1,to:Datafeeds.systemTime},function () {
//                 });
//             };

        });
    });




</script>

</html>
